<template>
  <div class="footer">
      <!-- 底部有两种形式的输入框，一种是激活前，一种是激活后 -->
      <!-- 第一种未激活 -->
      <div class="disable" v-if="!isFocus">
          <input type="text" class="commentInput" placeholder="写跟帖" @focus="showArea">
          <div class="commentIcon">
              <div class="commentNumber">{{post.comment_length}}</div>
              <span class="iconfont iconpinglun-"></span>
          </div>
          <span class="iconfont iconshoucang" @click="star" :class="{red:post.has_star}"></span>
          <span class="iconfont iconfenxiang"></span>
      </div>

      <!-- 第二种状态已激活 -->
      <div class="enable" v-if="isFocus">
          <textarea rows="3" class="commentArea" v-model="comment" @blur="handleBlur" ref="commentArea"></textarea>
          <div class="btnSend" @click="send">发送</div>
      </div>
  </div>
</template>

<script>
export default {
    props:[
        'post',
        'isActive',
        'replyObj'
        ],
    data(){
        return{
            // 这里是记录聚焦状态，默认是没有聚焦
            isFocus:false,
            comment:''
        }
    },
    watch:{
        isActive(){
            console.log('这里是 parentid' + this.replyObj.id);
            console.log('这里是 文章id' + this.post.id);
            this.isFocus = this.isActive
        }
    },
    methods:{
        handleBlur() {
            // 现在想要判断, textarea 有没有内容,如果有,暂时不要隐藏
            if (!this.comment) {
                this.isFocus = false
            }
        },
        showArea(){
            this.isFocus = true;
            this.$nextTick(()=>{
                this.$refs.commentArea.focus();
            })
        },
        handleBlur() {
            // 现在想要判断, textarea 有没有内容,如果有,暂时不要隐藏
            if (!this.comment) {
                this.isFocus = false
            }
        },
        send(){
            this.$axios({
                url: '/post_comment/' + this.post.id,
                method: 'post',
                headers:{
                 Authorization: localStorage.getItem('token')
                },
                data: {
                    content: this.comment,
                    parent_id: this.replyObj?this.replyObj.id:null
                }
            }).then(res=>{
                console.log(res.data);
                // 发送这个评论完成,所以需要清空评论框,将评论框缩小
                this.comment = '';
                this.isFocus = false;
                // 请求发送后，需要向父组件触发一个自定义事件，实时更新数据
                this.$emit('newComment');
            })
        },
        star(){
            console.log('点击了收藏按钮');
            this.$axios({
                url:'/post_star/' +this.post.id,
                method:'get',
                headers:{
                 Authorization: localStorage.getItem('token')
                }
            }).then(res=>{
                const {message} = res.data;
                if(message == "收藏成功"){
                    this.post.has_star = true;
                }else if(message =="取消成功"){
                    this.post.has_star =false;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.footer{
    background: #f8f8f8;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .disable{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.778vw;
        .commentInput{
            height: 8.611vw;
            line-height: 8.611vw;
            font-size: 3.889vw;
            border: none;
            outline: none;
            border-radius: 4.444vw;
            background: #d7d7d7;
            padding: 0 4.444vw;
            color: #666;
        }
        .iconfont{
            font-size: 6.389vw;
        }
        .commentIcon{
            position: relative;
            .commentNumber{
                position: absolute;
                top: -8px;
                height: 4.444vw;
                line-height: 4.444vw;
                font-size: 3.333vw;
                background: red;
                color: white;
                border-radius: 2.222vw;
                padding: 0 2.222vw;
                left: 0.556vw;
                box-sizing: border-box;
            }
        }
    }
    .enable{
        display: flex;
        padding: 2.778vw;
        justify-content: space-between;
        align-items: flex-end;
        .commentArea{
            width: 75vw;
            background: #d7d7d7;
            color: #666;
            border: none;
            outline: none;
            border-radius: 2.222vw;
            padding: 4.444vw;
            box-sizing: border-box;
            resize: none;
        }
        .btnSend {
            background: red;
            color: white;
            padding: 0 4.167vw;
            height: 7.222vw;
            line-height: 7.222vw;
            border-radius: 3.611vw;
            border: 1px solid red;
            font-size: 14px;
        }
    }
}
.red{
    color:red;
}
</style>